<template>
  <view class="content">
    <u-navbar title="联系客服" title-size="36rpx"></u-navbar>
    <image class="layoutView" :src="getImageUrl('kf-bg.png')" />
    <view
      class="top-bar"
      :style="{
        marginTop: `${statusBarHeight + 60}px`
      }"
    >
      <view class="bar1"> 专业客服 </view>
      <view class="bar2"> 有问题找我们 </view>
    </view>
    <view class="orderView">
      <view class="tabItemView">
        <view class="tabItem" @click="wxKefuPopupVisible = true">
          <u-icon name="/static/zxkf.png" size="90"></u-icon>
          <view class="tabTitle">在线客户</view>
        </view>
        <view class="tabItem" @click="phonePopupVisible = true">
          <u-icon name="/static/dhzx.png" size="90"></u-icon>
          <view class="tabTitle">电话咨询</view>
        </view>
      </view>
    </view>

    <view class="desc-content">
      <view class="tip"> 温馨提示: </view>
      <p class="content-title">1、客服工作日时间：</p>
      <p class="content-item">{{ businessHours }}</p>
    </view>

    <u-popup mode="bottom" v-model="wxKefuPopupVisible" border-radius="18">
      <view class="popup-box">
        <button class="popup-item" open-type="contact" @click="onWxaContact">
          打开小程序客服
        </button>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
        <view class="popup-item" @click="wxKefuPopupVisible = false"> 取消 </view>
      </view>
    </u-popup>

    <u-popup mode="bottom" v-model="phonePopupVisible" border-radius="18">
      <view class="popup-box">
        <view class="popup-item" @click="onMobile">
          {{ phoneTips }}
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
        <view class="popup-item" @click="phonePopupVisible = false"> 取消 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      navBackground: {
        background: '#00000000'
      },
      userInfo: '1',
      userCode: '',
      statusBarHeight: systemInfo.statusBarHeight,
      wxKefuPopupVisible: false,
      phonePopupVisible: false,
      phoneNumber: '18585768777',
      phoneTips: '18585768777（韩先生）',
      businessHours: '周一至周六，早上9:00-12:00，下午14:00-20:00'
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  onLoad() {
    // #ifdef MP-WEIXIN
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage']
    })
    // #endif
  },
  onShow() {
    this.initData()
  },
  methods: {
    initData() {},
    onWxaContact() {
      this.wxKefuPopupVisible = false
      // #ifndef MP-WEIXIN
      uni.showToast({
        icon: 'none',
        title: '该功能只支持小程序'
      })
      // #endif
    },
    onMobile() {
      this.phonePopupVisible = false
      // #ifdef H5
      uni.showToast({
        icon: 'none',
        title: 'H5不支持拨打电话'
      })
      // #endif
      // #ifndef H5
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber
      })
      // #endif
    }
  }
}
</script>

<style>
page {
  background: #f5f5f5;
}

.content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.tabTitle {
  font-size: 28rpx;
  color: #333333;
  margin-top: 10rpx;
}

.top-bar {
  z-index: 100;
  overflow: auto;
  font-size: 35rpx;
  color: #fff;
  margin: 120rpx 0 60rpx 80rpx;
  position: absolute;
  top: 0;
}

.bar1 {
  font-size: 30rpx;
  margin-bottom: 20rpx;
}

.bar2 {
  font-size: 40rpx;
  font-weight: 700;
}

.contentView {
  display: flex;
  flex-direction: column;
}

.layoutView {
  width: 100%;
  height: 280rpx;
  /* position: absolute; */
  /* top: 0px; */
}

.orderView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 0px 20rpx;
  z-index: 100;
  height: 200rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-top: -100rpx;
}

.orderTab {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 25rpx;
}

.activeTab {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-left: 20rpx;
}

.otherText {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  font-size: 24rpx;
  font-weight: 400;
  color: #aba9a2;
  margin-right: 20rpx;
}

.tabItemView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tabItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32rpx 0;
}

.desc-content {
  margin: 30rpx;
  line-height: 55rpx;
  font-size: 28rpx;
}

.tip {
  color: red;
  font-size: 30rpx;
}

.content-title {
  font-size: 28rpx;
}

.content-item {
  margin-left: 50rpx;
}

.popup-item {
  text-align: center;
  height: 110rpx;
  line-height: 110rpx;
}
</style>
